<template>
  <div class="approve---container">
    <div class="header" header="处理">
      <a-button class="back-button" @click="gotoBack"> 返回 </a-button>
    </div>
    <div class="main" v-loading="pageLoading">
      <!-- 头部流程 -->
      <flowList
        :source="flowSource"
        replaceFields="dealName"
        v-if="flowSource.length > 0"
      >
      </flowList>
      <!-- 报验信息 -->
      <div class="page-title">报验信息</div>
      <a-collapse v-model="byActiveKey">
        <a-collapse-panel
          :show-arrow="false"
          v-for="(item, index) in processesList"
          :key="item.scheduleWbsId"
        >
          <template slot="header">
            <div @click.stop class="customize-text">
              <div class="cust-collapse-header" style="padding-left: 0">
                ● 工序信息（{{ index + 1 }}）- {{ item.procedureItem }}
              </div>
            </div>
          </template>
          <template slot="extra">
            <div class="customize-extra">
              {{ byActiveKey.includes("1") ? "收起" : "展开" }}
              <div
                class="icon"
                :class="[byActiveKey.includes(item.scheduleWbsId) && 'active']"
              >
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <a-form-model ref="ruleForm">
            <processesCard
              :forms.sync="item.formList"
              @fileDownload="download($event)"
              @filePreview="viewFile($event)"
            ></processesCard>
          </a-form-model>
        </a-collapse-panel>
      </a-collapse>
      <!-- 处理记录 -->
      <a-collapse v-model="activeKey">
        <a-collapse-panel key="1" :show-arrow="false">
          <template slot="header">
            <div @click.stop class="customize-text" header="处理记录">
              <div class="cust-collapse-header">
                <div>报验人：{{ resultData.creater }}</div>
                <div>
                  处理状态：
                  <span class="flow" :class="[checkStatusClass(resultData)]">
                    {{ fliterName(resultData) }}
                  </span>
                </div>
              </div>
            </div>
          </template>
          <template slot="extra">
            <div class="customize-extra">
              {{ activeKey.includes("1") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('1') && 'active']">
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <div class="approve-record-container">
            <div class="item" v-for="(item, index) in record" :key="index">
              <div class="time-date">{{ item.updateTime }}</div>
              <div class="link-line">
                <div class="content">
                  <div class="dots"></div>
                  <div :class="index != record.length - 1 ? 'lines' : ''"></div>
                </div>
              </div>
              <div class="approve-container">
                <div class="approve-user">
                  <div class="name">{{ item.sysUsername }}</div>
                  <div class="result">{{ item.wfnodename }}</div>
                </div>
                <div class="approve-content" v-if="item.reason">
                  处理意见：{{ item.reason }}
                </div>
                <template v-if="item.operation != '0' && item.operation != '1'">
                  <transition name="slide-fade">
                    <div v-if="approveKey.includes(item.id)">
                      <template v-if="item.formList.length > 0">
                        <div
                          class="approve-collapse"
                          v-for="(v, i) in item.formList"
                          :key="i"
                        >
                          <div class="name">{{ v.elementName }}：</div>
                          <div class="content">
                            <div
                              class="text-container"
                              v-if="
                                v.elementType == '1' ||
                                v.elementType == '2' ||
                                v.elementType == '7'
                              "
                            >
                              {{ v.elementValue }}
                            </div>
                            <bjUploadFile
                              v-if="v.elementType == '3'"
                              v-model="v.fileList"
                              :viewMode="true"
                              @download="download($event)"
                              @preview="viewFile($event)"
                              :replaceFields="{
                                fileName: 'realFileName',
                                fileSize: 'fileSize',
                                fileType: 'fileType',
                                videoSrc: 'fileUrl',
                              }"
                            ></bjUploadFile>
                            <bjUploadImg
                              v-if="v.elementType == '4'"
                              v-model="v.fileList"
                              :viewMode="true"
                              replaceField="imagePath"
                            ></bjUploadImg>
                            <bjUploadFile
                              v-if="v.elementType == '5'"
                              v-model="v.fileList"
                              :viewMode="true"
                              :replaceFields="{
                                fileName: 'realFileName',
                                fileSize: 'fileSize',
                                fileType: 'fileType',
                                videoSrc: 'imagePath',
                              }"
                              type="video"
                            ></bjUploadFile>
                          </div>
                        </div>
                      </template>
                      <div v-else>
                        <a-empty />
                      </div>
                    </div>
                  </transition>
                </template>
                <div
                  class="approve-extra"
                  v-if="item.operation != '0' && item.operation != '1'"
                  @click="putAwayMore(item)"
                >
                  {{ approveKey.includes(item.id) ? "收起" : "更多" }}
                  <div
                    class="icon"
                    :class="[approveKey.includes(item.id) && 'active']"
                  >
                    <bj-icon-font
                      type="xl"
                      color="#0068B7"
                      :size="10"
                    ></bj-icon-font>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
      <!-- 处理信息 -->
      <div class="form-approve">
        <div class="title">处理信息</div>
        <div class="container">
          <a-form-model ref="form" :model="form" :rules="rules">
            <a-row>
              <!-- <a-col :span="24">
                <a-form-model-item label="处理结果" prop="result">
                  <a-radio-group v-model="form.result">
                    <a-radio value="2"> 合格 </a-radio>
                    <a-radio value="3"> 不合格 </a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="24">
                <a-form-model-item label="处理意见" prop="reason">
                  <a-input
                    placeholder="请输入处理意见"
                    v-model="form.reason"
                    type="textarea"
                    style="height: 100px"
                  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-for="item in approvalSource" :key="item.id">
                <a-form-model-item
                  :label="item.elementName"
                  :prop="item.key"
                  :rules="{
                    required: item.elementRequired == '0' ? true : false,
                    validator: validateForm,
                  }"
                >
                  <!-- 输入框 -->
                  <a-input
                    v-if="item.elementType == '1'"
                    :disabled="item.disabled == 1 ? true : false"
                    :placeholder="'请输入' + item.elementName"
                    v-model="item.defalutValue"
                  ></a-input>

                  <!-- textarea -->
                  <a-input
                    v-if="item.elementType == '2'"
                    :disabled="item.disabled == 1 ? true : false"
                    :placeholder="'请输入' + item.elementName"
                    v-model="item.defalutValue"
                    type="textarea"
                    style="height: 100px"
                  ></a-input>

                  <!-- 附件 -->
                  <bjUploadFile
                    v-if="item.elementType == '3'"
                    :count="6"
                    v-model="item.defalutValue"
                    :viewMode="item.disabled == 1 ? true : false"
                    :replaceFields="{
                      fileName: 'realFileName',
                      fileSize: 'fileSize',
                      fileType: 'fileType',
                      videoSrc: 'imagePath',
                    }"
                    @change="handleFileChange($event, item)"
                  ></bjUploadFile>

                  <!-- 图片 -->
                  <bjUploadImg
                    v-if="item.elementType == '4'"
                    :count="6"
                    :viewMode="item.disabled == 1 ? true : false"
                    v-model="item.defalutValue"
                    replaceField="imagePath"
                    @change="handleFileChange($event, item)"
                  ></bjUploadImg>

                  <!-- 视频 -->
                  <bjUploadFile
                    v-if="item.elementType == '5'"
                    :viewMode="item.disabled == 1 ? true : false"
                    :replaceFields="{
                      fileName: 'realFileName',
                      fileSize: 'fileSize',
                      fileType: 'fileType',
                      videoSrc: 'imagePath',
                    }"
                    :count="6"
                    type="video"
                    v-model="item.defalutValue"
                    @change="handleFileChange($event, item)"
                  ></bjUploadFile>

                  <!-- 下拉框 -->
                  <a-select
                    v-if="item.elementType == '7'"
                    style="width: 100%"
                    v-model="item.defalutValue"
                    :disabled="item.disabled == 1 ? true : false"
                    :placeholder="'请选择' + item.elementName"
                  >
                    <a-select-option
                      :value="seItem.value"
                      v-for="(seItem, seIdx) in item.selectDatas || []"
                      :key="seIdx"
                    >
                      {{ seItem.label }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
      </div>
    </div>
    <div class="footer">
      <a-button class="back-button" @click="gotoBack"> 取消 </a-button>
      <a-button type="primary" @click="submit()" :loading="submitLoading">
        确定
      </a-button>
    </div>
  </div>
</template>

<script>
//处理
import flowList from "@/components/flow-list";
import bjUploadFile from "@/components/bj-upload-file";
import bjUploadImg from "@/components/bj-upload-img";
import processesCard from "./components/processesCard";
import {
  bYJLDetails,
  getApproveFormData,
  uploadFileByType,
  getInspectionInit,
  approveData,
  getSelfTestPeople,
} from "@/api/wisdom-beam/quality-app";
import { downFileByUrl, commonViewFile } from "@/utils";
export default {
  components: {
    flowList,
    bjUploadFile,
    bjUploadImg,
    processesCard,
  },
  data() {
    return {
      byActiveKey: [],
      activeKey: [],
      //头部流程
      flowSource: [],
      //处理记录
      approveKey: [],
      record: [],
      resultData: {},
      //表单
      form: {
        //行id
        applyParentId: "",
        //2通过 3 拒绝
        result: "2",
        //操作理由
        reason: "",
      },
      rules: {
        result: [
          {
            required: true,
            message: "选择处理结果",
            trigger: "blur",
          },
        ],
        reason: [
          {
            required: true,
            message: "请输入处理意见",
            trigger: "blur",
          },
        ],
      },
      fileList: [],
      imageList: [],
      videoList: [],
      //////////////////
      pageLoading: false,
      approvalSource: [],
      processesList: [],
      submitLoading: false,
    };
  },
  mounted() {
    this.getPeopleData();
    this.getData();
  },
  methods: {
    //查询自检人
    getPeopleData() {
      let { orgCode } = this.$route.query;
      return new Promise((resolve, reject) => {
        getSelfTestPeople({ orgCode })
          .then((res) => {
            let { data } = res;
            let selectList = data?.result || [];
            let sList = [];
            selectList.forEach((v) => {
              sList.push({
                dicValue: v.approveUserId,
                dicDesc: v.approveUser,
              });
            });
            this.selfPeopleSelect = sList;
            resolve();
          })
          .catch((_) => {
            this.selfPeopleSelect = [];
            reject();
          });
      });
    },
    //提交
    submit() {
      let { id } = this.$route.query;
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.submitLoading = true;
          let { result, reason } = this.form;
          let formData = [];
          this.approvalSource.forEach((v) => {
            let { defalutValue, key } = v;
            formData.push({
              elementKey: key,
              elementValue: Array.isArray(defalutValue)
                ? defalutValue.map((v) => v.id).toString()
                : defalutValue ?? "",
            });
          });
          approveData({ formData, operate: result, reason, applyParentId: id })
            .then((res) => {
              let { data } = res;
              if (data?.result) {
                this.$message.success("操作成功");
                this.gotoBack();
              } else {
                this.$message.error("操作失败，请稍后重试！");
              }
            })
            .finally((_) => {
              this.submitLoading = false;
            });
        }
      });
    },

    //自定义表单校验
    validateForm(rule, value, callback) {
      let propField = rule.field;
      let item = this.approvalSource.find((v) => v.key == propField);
      let { defalutValue, elementName, elementType, elementRequired } = item;
      try {
        if (elementRequired != "0") {
          throw "";
        } else {
          if (["3", "4", "5"].includes(elementType)) {
            if (defalutValue.length == 0) {
              callback(new Error(`请选择${elementName}`));
            } else {
              throw "";
            }
          } else {
            if (!defalutValue) {
              callback(new Error(`请输入${elementName}`));
            } else {
              throw "";
            }
          }
        }
      } catch (error) {
        callback();
      }
    },

    //查询页面基础数据
    getData() {
      this.processesList = [];
      this.pageLoading = true;
      let ids = localStorage.getItem("processesApproveIds").split(",");
      let requestQueue = ids.map((v, i) => {
        return this.getInspectionInit(v, i);
      });
      Promise.all([requestQueue, this.getApproveFormData()])
        .then((res) => {})
        .catch((_) => {})
        .finally((_) => {
          this.getDetails().finally((_) => {
            this.pageLoading = false;
          });
        });
    },

    //页面初始化
    getInspectionInit(id, index) {
      return new Promise((resolve, reject) => {
        getInspectionInit(id, {})
          .then((res) => {
            let { data } = res;
            let source = data?.result || {};
            this.pargeInitSource = source;
            let { procedureItem } = source?.scheduleWbs || {};
            let formData = {};
            //处理 附件、图片、视频 类型的默认值
            (source?.wWorkflowForms || []).forEach((v) => {
              let { elementType, defalutValue } = v;
              if (
                elementType == "3" ||
                elementType == "4" ||
                elementType == "5"
              ) {
                if (!Array.isArray(defalutValue)) {
                  if (defalutValue) {
                    v.defalutValue = defalutValue.split(",");
                  } else {
                    v.defalutValue = [];
                  }
                }
              }
            });
            let sticForms = this.buildDefaultForm(source || {}).filter(
              (v) => v
            );
            let dicForms = source?.wWorkflowForms || [];
            dicForms.forEach((v) => {
              v.disabled = 1;
            });
            formData = {
              scheduleWbsId: source?.scheduleWbs?.id || "",
              procedureItem,
              formList: [...sticForms, ...dicForms],
            };
            this.processesList.push(formData);
            resolve(source);
          })
          .catch((_) => {
            reject();
          });
      });
    },

    //查询详情
    getDetails() {
      let { id } = this.$route.query;
      return new Promise((resolve, reject) => {
        bYJLDetails({ id })
          .then((res) => {
            let { data } = res;
            this.resultData = data.result || {};
            //顶部流程条
            let flowList = data.result?.applyNodes || [];
            //处理记录
            let recordList = data?.result?.approveRecords || [];
            this.approveKey = recordList.map((item) => item.id);
            //报验信息
            let list = data?.result?.scheduleWbsProcedureList || [];

            //顶部流程条
            let activeNums = 0;
            if (flowList.length > 0) {
              flowList.forEach((v, i) => {
                let { nodeDesc, operation } = v;
                v.subTitle = nodeDesc;
                if (operation == "0" || operation == "2") {
                  v.$$nodeStatus = "active";
                  activeNums++;
                }
              });
            }
            this.flowSource = flowList;

            //处理记录
            recordList = recordList.filter((item) => item.operation != "1");
            recordList.forEach((v) => {
              let { formdetails } = v;
              this.$set(v, "formList", formdetails || []);
            });
            recordList.forEach((v) => {
              let { formList } = v;
              formList.forEach((item) => {
                if (item.elementType == "7") {
                  try {
                    let s = JSON.parse(item.selectDatas);
                    item.selectDatas = s;

                    let label = item.selectDatas.find(
                      (findItem) => findItem.value == item.elementValue
                    ).label;

                    item.elementValue = label || "";
                  } catch (error) {
                    item.selectDatas = [];
                  }
                }
              });
            });
            this.record = recordList;

            //报验信息
            list.forEach((v, i) => {
              let { formdetails, hierarchy, rangeValue } = v;
              this.processesList[i].formList.forEach((form) => {
                let { key } = form;
                //层级
                if (key == "cengji") {
                  this.$set(form, "defalutValue", Number(hierarchy));
                }
                //幅别
                if (key == "rangeValue") {
                  this.$set(form, "defalutValue", Number(rangeValue));
                }

                //是否合格
                if (key == "result") {
                  this.$set(form, "defalutValue", v.result + "");
                }
                //自检人
                if (key == "selfCheckPerson") {
                  this.$set(form, "defalutValue", v.selfCheckPerson);
                }

                //施工部位
                if (key == "sjsgbw") {
                  let keys = [
                    "positionKey1",
                    "positionKey2",
                    "positionKey3",
                    "positionKey4",
                    "positionKey5",
                    "positionKey6",
                  ];
                  keys.forEach((sgbw) => {
                    this.$set(
                      form,
                      sgbw,
                      v[sgbw] == null ? undefined : Number(v[sgbw])
                    );
                  });
                }
              });
              formdetails.forEach((item) => {
                let { elementKey, elementType, elementValue, fileList } = item;
                let currentForm = this.processesList[i].formList.find(
                  (v) => v.key == elementKey
                );
                //文本框
                if (elementType == "1" || elementType == "2") {
                  this.$set(currentForm, "defalutValue", elementValue);
                }

                //附件
                if (
                  elementType == "3" ||
                  elementType == "4" ||
                  elementType == "5"
                ) {
                  this.$set(currentForm, "defalutValue", fileList || []);
                }

                //位置
                if (elementType == "6") {
                  this.$set(currentForm, "defalutValue", elementValue);
                }

                //
              });
            });

            resolve();
          })
          .catch((_) => {
            this.resultData = {};
            this.record = [];
            this.approveKey = [];
            reject();
          });
      });
    },

    //构件默认表单数据
    buildDefaultForm(item = {}, mode = "editor") {
      let {
        divisionalWorks,
        subDivisionalWorks,
        itemWorks,
        subItemWorks,
        procedureItem,
        orgCode,
        unitWorks,
        orgName,
      } = item?.scheduleWbs || {};
      let { cengjiShow, cengjiSelect, sjsgbwShow, rangeSelect, sjsgbwSelect } =
        item;

      let forms = [
        {
          elementName: "标段名称",
          key: "orgName",
          disabled: 1,
          elementType: "1",
          defalutValue: orgName,
          elementRequired: "0",
          orgCode,
          loading: false,
          $$formType: 0,
          selectDatas: [],
        },
        {
          elementName: "单位工程",
          key: "unitWorks",
          disabled: 1,
          elementType: "1",
          defalutValue: unitWorks,
          elementRequired: "0",
          loading: false,
          $$formType: 0,
          selectDatas: [],
        },
        {
          elementName: "分部工程",
          key: "divisionalWorks",
          disabled: mode == "editor" ? 1 : 0,
          elementType: "select",
          defalutValue: divisionalWorks,
          elementRequired: "0",
          loading: false,
          $$formType: 0,
          selectDatas: [],
        },
        {
          elementName: "分部子工程",
          key: "subDivisionalWorks",
          disabled: 1,
          elementType: "select",
          defalutValue: subDivisionalWorks,
          elementRequired: "0",
          loading: false,
          $$formType: 0,
          selectDatas: [],
        },
        {
          elementName: "分项工程",
          key: "itemWorks",
          disabled: 1,
          elementType: "select",
          defalutValue: itemWorks,
          elementRequired: "0",
          loading: false,
          $$formType: 0,
          selectDatas: [],
        },
        {
          elementName: "子分项工程",
          key: "subItemWorks",
          disabled: 1,
          elementType: "select",
          defalutValue: subItemWorks,
          elementRequired: "0",
          loading: false,
          $$formType: 0,
          selectDatas: [],
        },
        {
          elementName: "工序",
          key: "procedureItem",
          disabled: 1,
          elementType: "select",
          defalutValue: procedureItem,
          elementRequired: "0",
          loading: false,
          $$formType: 0,
          selectDatas: [],
        },
        {
          elementName: "施工部位",
          key: "sjsgbw",
          disabled: 1,
          elementType: "sgbw",
          defalutValue: undefined,
          elementRequired: "0",
          selectDatas: sjsgbwSelect || [],
          loading: false,
          $$formType: 0,
          positionKey1: undefined,
          positionKey2: undefined,
          positionKey3: undefined,
          positionKey4: undefined,
          positionKey5: undefined,
          positionKey6: undefined,
        },
        {
          elementName: "幅别",
          key: "rangeValue",
          disabled: 1,
          elementType: "select",
          defalutValue: undefined,
          elementRequired: "0",
          selectDatas: rangeSelect || [],
          loading: false,
          $$formType: 0,
        },
        {
          elementName: "是否合格",
          key: "result",
          disabled: 1,
          elementType: "radio",
          defalutValue: "0",
          elementRequired: "0",
          selectDatas: [],
          loading: false,
          $$formType: 0,
        },
        {
          elementName: "自检人",
          key: "selfCheckPerson",
          disabled: 1,
          elementType: "zjr",
          defalutValue: undefined,
          elementRequired: "0",
          selectDatas: this.selfPeopleSelect || [],
          loading: false,
          $$formType: 0,
        },
        {
          elementName: "层级",
          key: "cengji",
          disabled: 1,
          elementType: "select",
          defalutValue: undefined,
          elementRequired: "0",
          selectDatas: cengjiSelect || [],
          loading: false,
          $$formType: 0,
        },
      ];

      //是否展示层级
      if (!cengjiShow) {
        forms = forms.filter((v) => v.key != "cengji");
      }

      //是否展示施工部位
      if (!sjsgbwShow) {
        forms = forms.filter((v) => v.key != "sjsgbw");
      }

      return forms;
    },

    //监听附件上传
    handleFileChange(ev, item) {
      let { file } = ev;
      let { defalutValue } = item;
      let formData = new FormData();
      formData.append("uploadFile", file);
      uploadFileByType(formData, "WBS_PROCEDURE")
        .then((res) => {
          let { data } = res;
          this.$set(
            defalutValue[defalutValue.length - 1],
            "id",
            data?.result?.fileId || ""
          );
        })
        .catch((_) => {});
    },

    //查询处理表单
    getApproveFormData() {
      let { id } = this.$route.query;
      return new Promise((resolve, reject) => {
        getApproveFormData({ id })
          .then((res) => {
            let { data } = res;
            this.approvalSource = data?.result || [];
            this.approvalSource.forEach((v) => {
              let { elementType, selectDatas, defalutValue } = v;
              if (
                elementType == "3" ||
                elementType == "4" ||
                elementType == "5"
              ) {
                v.defalutValue = [];
              }
              if (elementType == "7") {
                v.defalutValue = defalutValue || undefined;
                try {
                  let s = JSON.parse(selectDatas);
                  v.selectDatas = s;
                } catch (error) {
                  v.selectDatas = [];
                }
              }
            });
            resolve();
          })
          .catch((_) => {
            this.approvalSource = [];
            reject();
          });
      });
    },

    //收起/更多
    putAwayMore(item) {
      if (this.approveKey.includes(item.id)) {
        this.approveKey = this.approveKey.filter((v) => v != item.id);
      } else {
        this.approveKey.push(item.id);
      }
    },

    //下载附件
    download(file) {
      let { imagePath, realFileName } = file;
      downFileByUrl(imagePath, realFileName);
    },

    //附件预览
    viewFile(file) {
      let { id } = file;
      commonViewFile("beam", id);
    },

    //上传附件
    upLoadFile({ file, index }) {
      let formData = new FormData();
      formData.append("uploadFile", file);
      this.$set(this.fileList[index], "loading", true);
      setTimeout(() => {
        this.$set(this.fileList[index], "loading", false);
      }, 300);
    },

    //上传图片
    upLoadImage({ file, index }) {
      let formData = new FormData();
      formData.append("uploadFile", file);
      this.$set(this.imageList[index], "loading", true);
      setTimeout(() => {
        this.$set(this.imageList[index], "loading", false);
      }, 300);
    },

    //上传视频
    upLoadVideo({ file, index }) {
      let formData = new FormData();
      formData.append("uploadFile", file);
      this.$set(this.videoList[index], "loading", true);
      setTimeout(() => {
        this.$set(this.videoList[index], "loading", false);
      }, 300);
      //fail
    },

    //返回
    gotoBack() {
      let { orgCode, unitWorks, backPath } = this.$route.query;
      this.$router.push({
        path: backPath ?? "/nebula/wisdom-beam-app/procedure/approvalRecord",
        query: {
          orgCode,
          unitWorks,
        },
      });
    },
    //校验状态名称
    fliterName(row) {
      let { operation } = row;
      switch (operation) {
        case "0":
          return "提交";

        case "1":
          return "处理中";

        case "2":
          return "通过";

        case "3":
          return "拒绝";

        case "4":
          return "驳回";

        case "9":
          return "待提交";

        default:
          return "--";
      }
    },

    //校验状态className
    checkStatusClass(row) {
      let { operation } = row;
      switch (operation) {
        case "0":
          return "submit";

        case "1":
          return "lock";

        case "2":
          return "normal";

        case "3":
          return "reject";

        case "4":
          return "reject";

        case "9":
          return "cancel";

        default:
          return "cancel";
      }
    },
  },
  destroyed() {
    localStorage.removeItem("processesApproveIds");
  },
};
</script>

<style lang="less" scoped>
.approve---container {
  box-sizing: border-box;
  height: 100%;
  padding: 10px 0px 10px 10px;
  .flex();
  flex-direction: column;
  /deep/.processes-card-warp {
    border: none;
  }
  .header {
    padding: 11px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
    .back-button {
      color: var(--primary-color);
      background: #f1f2f7 !important;
      border: none;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    .flex();
    flex-direction: column;

    .page-title {
      padding: 20px 0 0px 30px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
    }

    /deep/.ant-form-item {
      .flex();
      .ant-form-item-label {
        width: 130px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }

    .cust-collapse-header {
      padding-left: 20px;
      flex: 1;
      .flex();
      align-items: center;
      font-size: 14px;
      color: var(--primary-color);
      font-family: Microsoft YaHei;
      font-weight: 400;
      > div {
        margin-right: 10px;
        .flow {
          display: inline-block;
          min-width: 60px;
          border-radius: 4px;
          text-align: center;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          &.normal {
            background: #4bc964;
          }
          &.lock {
            background: #ff993f;
          }
          &.cancel {
            background: #f1f2f7;
            color: #aab0bc;
          }
        }
      }
    }

    /deep/.ant-collapse {
      .ant-collapse-item {
        border-bottom: 1px solid #f3f4f6;
        border-radius: 0;
      }
    }
    //处理记录
    .approve-record-container {
      box-sizing: border-box;
      padding: 20px 60px 30px 60px;
      overflow: hidden;
      font-family: Microsoft YaHei;
      .item {
        .flex();
        .time-date {
          flex-shrink: 0;
          min-width: 100px;
          font-size: 14px;
          color: #333333;
          line-height: 22px;
        }
        .link-line {
          .flex();
          flex-direction: column;
          margin: 4px 10px 0 10px;
          .content {
            flex: 1;
            .flex();
            flex-direction: column;
            align-items: center;
            .dots {
              width: 13px;
              height: 13px;
              border-radius: 50%;
              background-color: #fff;
              border: 2px solid #d9dce2;
              .flex();
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
            .lines {
              width: 1px;
              flex: 1;
              min-height: 50px;
              background-color: #d9dce2;
              margin-top: 3px;
            }
          }
        }
        .approve-container {
          flex: 1;
          .approve-user {
            margin-bottom: 10px;
            .flex();
            align-items: center;
            .name {
              font-size: 16px;
              color: #333333;
              margin-right: 10px;
            }
            .result {
              font-size: 14px;
              color: #666666;
            }
          }
          .approve-content {
            margin-bottom: 10px;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            padding: 6px 10px;
            border-radius: 4px;
            background: #f7f7f7;
            word-break: break-all;
          }

          .slide-fade-enter-active {
            transition: all 0.2s ease;
          }
          .slide-fade-leave-active {
            transition: all 0.1s ease;
          }
          .slide-fade-enter,
          .slide-fade-leave-to {
            transform: translateY(10px);
            opacity: 0;
          }

          .approve-extra {
            cursor: pointer;
            margin-bottom: 50px;
            font-size: 14px;
            font-weight: 400;
            color: var(--primary-color);
            .flex();
            align-items: center;
            .icon {
              transform: scale(0.75);
              margin-left: 4px;
              transition: 0.3s;
              &.active {
                transform: scale(0.75) rotate(180deg);
              }
            }
          }

          .approve-collapse {
            .flex();
            box-sizing: border-box;
            padding: 20px 0 0 10px;
            margin-bottom: 10px;
            background: #f7f7f7;
            border-radius: 4px;
            overflow: hidden;
            .name {
              font-weight: 400;
              flex-shrink: 0;
              font-size: 14px;
              color: #333333;
              padding-bottom: 20px;
            }
            .content {
              flex: 1;
              .custom-scrollbar();
              .text-container {
                margin: 0 0 20px 0;
                word-break: break-all;
              }

              /deep/.bj-upload-file {
                width: 100%;
                .choosed-file-warp {
                  padding: 0;
                  background-color: unset;
                  width: 100%;
                  height: 100%;
                  box-sizing: border-box;
                  margin: 0;
                  border-radius: 0;
                  border: none;
                  .file-list {
                    padding-left: 0;
                  }
                }
              }
            }
          }
        }
        &:last-child {
          .approve-extra {
            margin-bottom: 0;
          }
        }
      }
    }

    //表单
    .form-approve {
      .flex();
      flex-direction: column;
      box-sizing: border-box;
      padding: 20px 60px 0px 30px;
      .title {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #525a5d;
        margin-bottom: 20px;
      }
      .container {
        margin-bottom: 20px;
      }
      &.approve-info {
        padding: 20px 0 0px 30px;
        border-bottom: 1px solid #f3f4f6;
        .processes-body {
          padding: 0 30px 0 30px;
        }
        /deep/.ant-collapse {
          .ant-collapse-item {
            border-bottom: none;
            .customize-text {
              color: var(--primary-color);
              align-items: center;
              &::before {
                content: "";
                display: block;
                width: 6px;
                height: 6px;
                background: var(--primary-color);
                border-radius: 50%;
                margin-right: 6px;
              }
              text-align: left;
              justify-content: flex-start;
              padding: 10px 0 10px 30px;
            }
          }
        }
      }
    }
  }
  .footer {
    border-top: 1px solid #f3f4f6;
    padding: 20px 0;
    .flex();
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }
}
</style>
